import Vue from 'vue'

/*
 *  给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的拖拽、双击全屏
 *  showScale 拉伸
 */
Vue.directive('dialogDrag', {
	bind(el, binding, vnode, oldVnode) {
		//弹框可拉伸最小宽高
		let minWidth = el.getAttribute('minWidth')||350;
		let minHeight = el.getAttribute('minHeight')||300;
		minWidth = Number(minWidth);
		minHeight = Number(minHeight);
		//初始非全屏
		let isFullScreen = false;
		//当前宽高
		let nowWidth = 0;
		let nowHight = 0;
		//当前顶部高度
		let nowMarginTop = 0;
		//获取弹框头部（这部分可双击全屏）
		const dialogHeaderEl = el.querySelector('.el-dialog__header');
		//获取弹框尾部
		const dialogFooterEl = el.querySelector('.el-dialog__footer');
		//弹窗
		const dragDom = el.querySelector('.el-dialog');
		//给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
		dragDom.style.overflow = "auto";
		//清除选择头部文字效果
		// dialogHeaderEl.onselectstart = new Function("return false");
		//头部加上可拖动cursor
		dialogHeaderEl.style.cursor = 'move';
		// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
		const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
		let initHeight=0;
		let moveDown = (e) => {
			if(dragDom){
				initHeight = dragDom.offsetHeight - (dialogHeaderEl?dialogHeaderEl.offsetHeight:0) - (dialogFooterEl?dialogFooterEl.offsetHeight:0);
			}
			// 上次鼠标弹起时X轴的偏移量
			let l = +dragDom.style.left.replace(/px/, "");
			// 上次鼠标弹起时Y轴的偏移量
			let t = +dragDom.style.top.replace(/px/, "");
			let x = e.pageX - l;
			let y = e.pageY - t;
			let markL = 0,
				markT = 0,
				markR = 0,
				markB = 0,
				offset = 1; // 偏移量
			let marginTop = sty.marginTop,
			marginBottom = sty.marginBottom,
			marginLeft = sty.marginLeft,
			marginRight = sty.marginRight;
			
			el.style.overflow = 'hidden';
			document.onmousemove = (e) => {
				document.body.classList.add('noselect');
				// 处理右边界
				if (dragDom.offsetLeft + dragDom.offsetWidth + offset >= el.offsetWidth) {
					markR === 0 && (markR = e.pageX - x);
					e.pageX - x < markR && (dragDom.style.left = e.pageX - x + "px");
				} else if (dragDom.offsetLeft > offset) {
					dragDom.style.left = e.pageX - x + "px";
				} else {
					// 处理左边界
					markL === 0 && (markL = e.pageX - x);
					e.pageX - x > markL && (dragDom.style.left = e.pageX - x + "px");
				}
				// 处理下边界
				if (dragDom.offsetTop + dragDom.offsetHeight + offset >= el.offsetHeight) {
					markB === 0 && (markB = e.pageY - y);
					e.pageY - y < markB && (dragDom.style.top = e.pageY - y + "px");
				} else if (dragDom.offsetTop > offset) {
					dragDom.style.top = e.pageY - y + "px";
				} else {
					// 处理上边界
					markT === 0 && (markT = e.pageY - y);
					e.pageY - y > markT && (dragDom.style.top = e.pageY - y + "px");
				}
			};
			document.onmouseup = () => {
				document.onmousemove = null;
				document.onmouseup = null;
				el.style.overflow = 'auto';
				document.body.classList.remove('noselect');
			};
		}
		dialogHeaderEl.onmousedown = moveDown;
		//双击头部效果
		dialogHeaderEl.ondblclick = (e) => {
			let sw = Number(sty.width.replace(/px/, ""));
			console.log('initHeight：'+initHeight);
			if (isFullScreen == false) {
				nowHight = dragDom.clientHeight;
				nowWidth = dragDom.clientWidth;
				nowMarginTop = dragDom.style.marginTop;
				dragDom.style.left = 0;
				dragDom.style.top = 0;
				el.style.overflow = 'hidden';
				dragDom.style.height = document.body.offsetHeight+'px';
				dragDom.style.width = document.body.offsetWidth+'px';
				dragDom.style.marginTop = 0;
				isFullScreen = true;
				dialogHeaderEl.style.cursor = 'initial';
				dialogHeaderEl.onmousedown = null;
				binding.value({bodywidth:document.body.offsetWidth,bodyheight:document.body.offsetHeight - dialogHeaderEl.offsetHeight});
			} else {
				binding.value({bodywidth:sw,bodyheight:initHeight});
				dragDom.style.height = "auto";
				dragDom.style.width = nowWidth + 'px';
				dragDom.style.marginTop = nowMarginTop;
				isFullScreen = false;
				dialogHeaderEl.style.cursor = 'move';
				dialogHeaderEl.onmousedown = moveDown;
			}
		}
		if(el.getAttributeNode("showScale")&&el.getAttributeNode("showScale").nodeName == 'showscale'){
			if(el.getAttributeNode("showScale").nodeValue==''||el.getAttributeNode("showScale").nodeValue=='true'){
				console.warn('支持缩放=====');
				//拉伸(左下方)
				let resizeLB = document.createElement("div");
				dragDom.appendChild(resizeLB);
				//在弹窗右下角加上一个10-10px的控制块
				resizeLB.className = 'dialogTag leftBottomTag';
				resizeLB.style.cursor = 'se-resize';
				resizeLB.style.position = 'absolute';
				resizeLB.style.height = '10px';
				resizeLB.style.width = '10px';
				resizeLB.style.left = '0px';
				resizeLB.style.bottom = '0px';
				resizeLB.style.zIndex = '999';
				//鼠标拉伸弹窗
				resizeLB.onmousedown = (e) => {
					// 记录初始x位置
					let clientX = e.clientX,clientY = e.clientY;
					// 鼠标按下，计算当前元素距离可视区的距离
					let disX = clientX - resizeLB.offsetLeft,
					disY = clientY - resizeLB.offsetTop,
					headerW = dialogHeaderEl.offsetWidth;
					// console.warn('鼠标按下，计算当前元素距离可视区的距离:'+disX+' y:'+disY);
					document.onmousemove = function(e) {
						e.preventDefault(); // 移动时禁用默认事件
						// 通过事件委托，计算移动的距离
						let x = (disX- e.clientX) + headerW; //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
						let y = e.clientY - disY;
						//比较是否小于最小宽高
						dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
						dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
						binding.value({bodywidth:(x > minWidth ? x : minWidth),bodyheight:(y > minHeight ? y : minHeight) - dialogHeaderEl.offsetHeight});
					};
					//拉伸结束
					document.onmouseup = function(e) {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
				//拉伸(右下方)
				let resizeRB = document.createElement("div");
				dragDom.appendChild(resizeRB);
				//在弹窗右下角加上一个10-10px的控制块
				resizeRB.className = 'dialogTag rightBottomTag';
				resizeRB.style.cursor = 'se-resize';
				resizeRB.style.position = 'absolute';
				resizeRB.style.height = '10px';
				resizeRB.style.width = '10px';
				resizeRB.style.right = '0px';
				resizeRB.style.bottom = '0px';
				resizeRB.style.zIndex = '999';
				//鼠标拉伸弹窗
				resizeRB.onmousedown = (e) => {
					// 记录初始x位置
					let clientX = e.clientX;
					// 鼠标按下，计算当前元素距离可视区的距离
					let disX = e.clientX - resizeRB.offsetLeft;
					let disY = e.clientY - resizeRB.offsetTop;
					document.onmousemove = function(e) {
						e.preventDefault(); // 移动时禁用默认事件
				
						// 通过事件委托，计算移动的距离
						let x = e.clientX - disX + (e.clientX - clientX); //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
						let y = e.clientY - disY;
						//比较是否小于最小宽高
						dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
						dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
						binding.value({bodywidth:(x > minWidth ? x : minWidth),bodyheight:(y > minHeight ? y : minHeight) - dialogHeaderEl.offsetHeight});
					};
					//拉伸结束
					document.onmouseup = function(e) {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
				
				//拉伸(右边)
				let resizeElR = document.createElement("div");
				dragDom.appendChild(resizeElR);
				//在弹窗右下角加上一个10-10px的控制块
				resizeElR.className = 'dialogTag rightTag';
				resizeElR.style.cursor = 'w-resize';
				resizeElR.style.position = 'absolute';
				resizeElR.style.height = '100%';
				resizeElR.style.width = '10px';
				resizeElR.style.right = '0px';
				resizeElR.style.top = '0px';
				//鼠标拉伸弹窗
				resizeElR.onmousedown = (e) => {
					let elW = dragDom.clientWidth,elH = dragDom.clientHeight;
					let EloffsetLeft = dragDom.offsetLeft;
					// 记录初始x位置
					let clientX = e.clientX;
					document.onmousemove = function(e) {
						e.preventDefault(); // 移动时禁用默认事件
						//右侧鼠标拖拽位置
						if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
							//往左拖拽
							if (clientX > e.clientX) {
								if (elW - (clientX - e.clientX) * 2 < minWidth) {
									dragDom.style.width = minWidth + 'px';
									binding.value({bodywidth:minWidth,bodyheight:elH-dialogHeaderEl.offsetHeight});
								} else {
									dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';
									binding.value({bodywidth:elW - (clientX - e.clientX) * 2,bodyheight:elH-dialogHeaderEl.offsetHeight});
								}
							}
							//往右拖拽
							if (clientX < e.clientX) {
								dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
								binding.value({bodywidth:elW + (e.clientX - clientX) * 2,bodyheight:elH-dialogHeaderEl.offsetHeight});
							}
						}
				
					};
					//拉伸结束
					document.onmouseup = function(e) {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
				
				//拉伸(左边)
				let resizeElL = document.createElement("div");
				dragDom.appendChild(resizeElL);
				//在弹窗右下角加上一个10-10px的控制块
				resizeElL.className = 'dialogTag leftTag';
				resizeElL.style.cursor = 'w-resize';
				resizeElL.style.position = 'absolute';
				resizeElL.style.height = '100%';
				resizeElL.style.width = '10px';
				resizeElL.style.left = '0px';
				resizeElL.style.top = '0px';
				//鼠标拉伸弹窗
				resizeElL.onmousedown = (e) => {
					let elW = dragDom.clientWidth,elH = dragDom.clientHeight;
					let EloffsetLeft = dragDom.offsetLeft;
					// 记录初始x位置
					let clientX = e.clientX;
					document.onmousemove = function(e) {
						e.preventDefault(); // 移动时禁用默认事件
						//左侧鼠标拖拽位置
						if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
							//往左拖拽
							if (clientX > e.clientX) {
								dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
								binding.value({bodywidth:elW + (clientX - e.clientX) * 2,bodyheight:elH-dialogHeaderEl.offsetHeight});
							}
							//往右拖拽
							if (clientX < e.clientX) {
								if (dragDom.clientWidth < minWidth) {} else {
									dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
									binding.value({bodywidth:elW - (e.clientX - clientX) * 2,bodyheight:elH-dialogHeaderEl.offsetHeight});
								}
							}
						}
				
					};
					//拉伸结束
					document.onmouseup = function(e) {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
				
				// 拉伸(下边)
				let resizeElB = document.createElement("div");
				dragDom.appendChild(resizeElB);
				//在弹窗右下角加上一个10-10px的控制块
				resizeElB.className = 'dialogTag bottomTag';
				resizeElB.style.cursor = 'n-resize';
				resizeElB.style.position = 'absolute';
				resizeElB.style.height = '10px';
				resizeElB.style.width = '100%';
				resizeElB.style.left = '0px';
				resizeElB.style.bottom = '0px';
				//鼠标拉伸弹窗
				resizeElB.onmousedown = (e) => {
					let EloffsetTop = dragDom.offsetTop;
					let ELscrollTop = el.scrollTop;
					let clientY = e.clientY;
					let elH = dragDom.clientHeight;
					document.onmousemove = function(e) {
						e.preventDefault(); // 移动时禁用默认事件
						//底部鼠标拖拽位置
						if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY <
							EloffsetTop + elH) {
							//往上拖拽
							if (clientY > e.clientY) {
								if (elH - (clientY - e.clientY) * 2 < minHeight) {
									dragDom.style.height = minHeight + 'px';
									binding.value({bodywidth:dialogHeaderEl.offsetWidth,bodyheight:minHeight-dialogHeaderEl.offsetHeight})
								} else {
									dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';
									binding.value({bodywidth:dialogHeaderEl.offsetWidth,bodyheight:elH - (clientY - e.clientY) * 2})
								}
							}
							//往下拖拽
							if (clientY < e.clientY) {
								dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';
								binding.value({bodywidth:dialogHeaderEl.offsetWidth,bodyheight:elH + (e.clientY - clientY) * 2 - dialogHeaderEl.offsetHeight})
							}
						}
					};
					//拉伸结束
					document.onmouseup = function(e) {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
			}
		}
	}
})